<!--
 * @Author: Lizhenyu
 * @Date: 2021-02-02 09:53:59
 * @FilePath: \usp-osm-frondend\src\views\serviceCenter\serviceMgmt\dialog\addCoupon.vue
-->
<template>
  <div
    class="coupon-dialog"
    v-loading="pageLoading"
    element-loading-text="加载中..."
  >
    <el-dialog
      title="添加券池"
      :visible.sync="isShow"
      width="80%"
      element-loading-text="加载中..."
      :before-close="cancel"
      :append-to-body="true"
      top="0"
    >
      <div class="container-form">
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <el-form
              :model="formData"
              label-position="left"
              label-width="80px"
              size="mini"
              ref="formData"
            >
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="券池编号">
                    <el-input
                      clearable
                      v-model="formData.couponCode"
                      @input="formData.couponCode=formData.couponCode.replace(/[^\a-\z\A-\Z0-9]/g,'')"
                      placeholder="券池编号"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="券池名称">
                    <el-input
                    clearable
                      v-model="formData.couponName"
                      @input="formData.couponName=formData.couponName.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                      placeholder="券池名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="券池来源">
                    <el-select
                      v-model="formData.source"
                      placeholder="券池来源"
                      popper-class="select-class"
                      :popper-append-to-body="false"
                      clearable
                    >
                      <el-option key label="全部" value></el-option>
                      <el-option
                          v-for="item in lookupItems.SOURCEOFCOUPONPOOL"
                          :key="item.id"
                          :label="item.dicName"
                          :value="item.dicCode"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="业务类型">
                    <el-select
                      v-model="formData.businessType"
                      placeholder="业务类型"
                      popper-class="select-class"
                      :popper-append-to-body="false"
                      clearable
                    >
                      <el-option key label="全部" value></el-option>
                      <el-option
                          v-for="item in lookupItems.BUSINESSTYPE"
                          :key="item.id"
                          :label="item.dicName"
                          :value="item.dicCode"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="服务商">
                    <el-input
                      clearable
                      v-model="formData.serviceProvidersName"
                      @input="formData.serviceProvidersName=formData.serviceProvidersName.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                      placeholder="服务商"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="创建时间">
                      <div class="block">
                        <el-date-picker
                          v-model="formData.createDate"
                          type="daterange"
                          range-separator="至"
                          :picker-options="pickerOptions"
                          :default-value="[new Date(), new Date()]"
                          value-format="yyyy-MM-dd"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                        ></el-date-picker>
                      </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
        <div style="padding-bottom: 20px">
          <el-row class="search-row">
            <el-col :span="8" :offset="16" style="text-align: right">
              <el-button
                @click="resetForm('formData')"
                icon="el-icon-refresh-left"
                class="white-btn"
              >
                重置
              </el-button>
              <el-button
                @click="searchFetchList"
                icon="el-icon-search"
                class="dark-btn search-btn"
                style="float: right"
              >
                {{ $t('search') }}
              </el-button>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="container-table">
        <v-table
          :data="tableList"
          ref="multipleTable"
          :listLoading="listLoading"
          loadingText="加载中..."
          :paginationTotal="total"
          :page-size="formData.displayLength"
          @handleSelectionChange="handleSelectionChange"
          v-on:pageSizeChange="pageSizeChange"
          v-on:currentPageChange="currentPageChange"
          border
          pagination
          style="margin-top: 20px"
        >
          <el-table-column
            type="selection"
            :reserve-selection="false"
            width="55"
          >
          <!-- :selectable="getSelection" -->
          </el-table-column>
          <el-table-column
            label="券池编号"
            min-width="120"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.couponCode }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="券池名称"
            min-width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.couponName }}
            </template>
          </el-table-column>
          <el-table-column
            label="券池来源"
            min-width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('SOURCEOFCOUPONPOOL', scope.row.source) }}
            </template>
          </el-table-column>
          <el-table-column
            label="业务类型"
            min-width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('BUSINESSTYPE', scope.row.businessType) }}
            </template>
          </el-table-column>
          <el-table-column
            label="券面值"
            min-width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.faceValue }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="服务商"
            min-width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.serviceProvidersName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="有效期类型"
            min-width="80"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('PERIODTYPE', scope.row.periodType) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
            min-width="160px"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.createTime | timestampToChange('time') }}
            </template>
          </el-table-column>
        </v-table>
      </div>
      <div class="footer">
        <div class="footer-btn">
          <el-button @click="cancel" class="white-btn">
            {{ $t('cancel') }}
          </el-button>
          <el-button
            @click="confirm"
            :loading="submitting"
            :disabled="disabled"
            class="dark-btn"
          >
            {{ $t('assetCenter.warehouseOrder.confirmation') }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VTable from '@/components/PageTable/index'
import { mapGetters } from 'vuex'
import { common } from '@/mixins/common'
import { getCoupon } from '@/api/coupon'
export default {
  name: 'addCoupon',
  mixins: [common],
  components: {
    VTable
  },
  data () {
    return {
      formData: {
        couponCode: '',
        couponName: '',
        source: '',
        serviceProvidersName: '',
        createDate: '',
        businessType: '',
        displayLength: 10,
        displayStart: 0
      },
      ids: [],
      tableList: [],
      selectList: [],
      total: 0,
      disabled: false,
      isShow: false,
      submitting: false,
      listLoading: false,
      pageLoading: false,
      pickerOptions: {
        disabledDate (time) {
          // 如果没有后面的-8.64e7就是不可以选择今天的
          return time.getTime() > Date.now() // - 8.64e7
        }
      }
    }
  },
  computed: {
    ...mapGetters(['lookupItems'])
  },
  methods: {
    searchFetchList () {
      this.formData.displayStart = 0
      this.$refs.multipleTable.restPage()
      this.fetchList()
    },
    fetchList (idList) {
      this.listLoading = true
      if (this.ids.length === 0) {
        this.ids = idList
      }
      const params = {
        ...this.formData,
        frozenState: '1',
        status: '2',
        ids: this.ids,
        createTimeStart: this.formData.createDate ? new Date(this.formData.createDate[0] + ' ' + '00:00:00').getTime() : '',
        createTimeEnd: this.formData.createDate ? new Date(this.formData.createDate[1] + ' ' + '23:59:59').getTime() : ''
      }
      getCoupon(params).then(res => {
        if (res) {
          this.listLoading = false
          if (Number(res.code) === 1) {
            const obj = res.obj
            this.tableList = obj.data || []
            this.total = obj.total
          } else if (Number(res.code) === 0) {
            this.$confirm(res.msg, {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        }
      })
    },
    open (idList) {
      this.isShow = true
      if (idList) {
        this.ids = idList
      }
      this.fetchList(idList)
    },
    cancel () {
      this.isShow = false
      this.resetForm()
    },
    handleSelectionChange (val) {
      this.selectList = val
      if (this.selectList.length === 0) {
        this.disabled = true
      } else {
        this.disabled = false
      }
    },
    confirm () {
      this.isShow = false
      this.$parent.getTableData(this.selectList)
    },

    // 修改page size
    pageSizeChange (size) {
      this.formData.displayLength = size
      this.fetchList()
    },

    // 修改current page
    currentPageChange (curPage) {
      this.formData.displayStart = curPage - 1
      this.fetchList()
    },

    resetForm () {
      this.formData = {
        couponCode: '',
        couponName: '',
        source: '',
        serviceProvidersName: '',
        createDate: '',
        businessType: '',
        displayLength: 10,
        displayStart: 0
      }
      this.submitting = false
      this.$refs.formData.resetFields()
      this.$refs.multipleTable.$refs.elTable.clearSelection()
      this.$nextTick(() => {
        this.$refs.multipleTable.restPage()
      })
      this.fetchList()
    },

    resetPage () {
      this.formData.displayStart = 0
      this.$refs.multipleTable.restPage()
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-form--label-top .el-form-item__label {
  padding-bottom: 0;
}
/deep/ .footer .footer-btn {
  padding-top: 0;
  margin: 30px 0 10px 0;
}
/deep/ .el-input__prefix {
  top: 3px;
}
</style>
